<%--
  Created by IntelliJ IDEA.
  User: JMS
  Date: 2020/12/21
  Time: 16:56
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>员工注册</title>

    <!-- Meta tags -->
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <!-- CSS Stylesheet -->
    <link rel="stylesheet" href="../../static/css/style.css" type="text/css" media="all" />

    <link rel="stylesheet" type="text/css" href="../../static/css/basic.css">

    <!-- fontawesome v5 -->
    <script src="../../static/bootstrap/jquery-3.5.1.min.js"></script>

    <script src="../../static/js/register_backgronp.js"></script>
    <script language="javascript">
        function checkform() {
            if ($("#user").val() == "") {
                alert("用户名不能为空！");
                $("#user").focus();
                return false;
            }
            if ($("#password").val() == "") {
                alert("密码不能为空！");
                $("#password").focus();
                return false;
            }
            if ($("#phoneNumber").val() == "") {
                alert("手机号不能为空！");
                $("#phoneNumber").focus();
                return false;
            }
            if ($("#verificationCode").val() == "") {
                alert("请填写验证码！");
                $("#verificationCode").focus();
                return false;
            }
            $("#login").submit();
        }
        function sendMsg() {
            var phoneNumber = document.getElementById('phoneNumber').value;

            if (!(/^1[34578]\d{9}$/.test(phoneNumber))) {

                alert("手机号码有误，请重填");

                return false;
            }
                let xhttp = new XMLHttpRequest();
                xhttp.onreadystatechange = function () {
                    if (this.readyState === 4 && this.status === 200) {
                        document.getElementById("hid").innerHTML = this.responseText;
                        alert(this.responseText);
                    }
                };
                const forget = document.getElementById("phoneNumber").value;
                xhttp.open("GET", "/sendMsg/" + forget, true);
                xhttp.send();
                let b1 = document.getElementById('b1');
                let number = 60;
                let countdown = function () {
                    if (number === 0) {
                        b1.disabled = false;
                        b1.innerHTML = "发送验证码";
                        number = 60;
                        return;
                    } else {
                        b1.disabled = true;
                        b1.innerHTML = number + "秒";
                        number--;
                    }
                    setTimeout(countdown, 1000);
                }
                setTimeout(countdown, 1000);
            }
    </script>

</head>

<body>
<div class="container">
    <!-- logo -->
    <div style="height: 80px;background-color: white;">
        <div style="float: left;margin-left: 50px">
            <img src="../../static/images/logo.png" width="65" /><img src="../../static/images/login.png" />
        </div>
    </div>
    <!-- //logo -->

    <!-- body -->
    <div class="forms-grid">
        <!-- register -->
        <div class="register" style="background-color:rgba(255, 255, 255, .1);">
            <strong style="color: rgba(255, 255, 255, .7)">员工注册</strong>
            <form name="login" id="login" action="/register" method="post">
                <div class="form">

                    <div class="form-row">
                        <%--@declare id="input"--%><label class="form-label" for="input" style="color: white;">用户名</label>
                        <input type="text" class="form-text" id="username" name="username" autocomplete="off"
                               style="background-color:rgba(255, 255, 255, .5)">
                    </div>

                    <div class="form-row">
                        <label class="form-label" for="input" style="color: white;">密码</label>
                        <input type="password" class="form-text" id="password" name="password"
                               style="background-color:rgba(255, 255, 255, .5)">
                    </div>

                    <div class="form-row">
                        <label class="form-label" for="input" style="color: white;">联系电话</label>
                        <input type="text" class="form-text" id="phoneNumber" name="phoneNumber" autocomplete="off"
                               style="background-color:rgba(255, 255, 255, .5)">
                    </div>

                    <div class="form-row">
                        <div class="form-group">
                            <input type="text" class="form-text" id="verificationCode" name="verificationCode" autocomplete="off"
                                   style="background-color:rgba(255, 255, 255, .5); width: 220px;">
                            <button type="button" class="btns btns-primary" style="width: 100px;" id ="b1" onclick="sendMsg()">验证码</button>
                        </div>
                    </div>


                    <div class="form-row button-login">
                        <input type="button" class="btn btn-login" value="注册" onClick="return checkform()">
                    </div>

                </div>
                <input type="hidden" id="hid">
            </form>

        </div>
        <!-- //register -->
    </div>
    <!-- //body -->

    <!-- copyright -->
    <div class="footer"> <span class="footerText">阿就这物业管理系统 Copyright2020-2022</span> </div>
    <!-- //copyright -->
</div>
<script>
    ! function () {

        function n(n, e, t) {

            return n.getAttribute(e) || t

        }

        function e(n) {

            return document.getElementsByTagName(n)

        }

        function t() {

            var t = e("script"),
                o = t.length,
                i = t[o - 1];

            return {

                l: o,
                z: n(i, "zIndex", -1),
                o: n(i, "opacity", .5),
                c: n(i, "color", "0,0,0"),
                n: n(i, "count", 99)

            }

        }

        function o() {

            a = m.width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth,

                c = m.height = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight

        }

        function i() {

            r.clearRect(0, 0, a, c);

            var n, e, t, o, m, l;

            s.forEach(function (i, x) {

                for (i.x += i.xa, i.y += i.ya, i.xa *= i.x > a || i.x < 0 ? -1 : 1, i.ya *= i.y > c || i.y < 0 ? -1 : 1, r
                    .fillRect(i.x - .5, i.y - .5, 1, 1), e = x + 1; e < u.length; e++) n = u[e],

                null !== n.x && null !== n.y && (o = i.x - n.x, m = i.y - n.y,

                    l = o * o + m * m, l < n.max && (n === y && l >= n.max / 2 && (i.x -= .03 * o, i.y -= .03 * m),

                    t = (n.max - l) / n.max, r.beginPath(), r.lineWidth = t / 2, r.strokeStyle = "rgba(" + d.c + "," + (
                    t + .2) + ")", r.moveTo(i.x, i.y), r.lineTo(n.x, n.y), r.stroke()))

            }),

                x(i)

        }

        var a, c, u, m = document.createElement("canvas"),

            d = t(),
            l = "c_n" + d.l,
            r = m.getContext("2d"),

            x = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame ||
                window.oRequestAnimationFrame || window.msRequestAnimationFrame ||

                function (n) {

                    window.setTimeout(n, 1e3 / 45)

                },

            w = Math.random,
            y = {
                x: null,
                y: null,
                max: 2e4
            };
        m.id = l, m.style.cssText = "position:fixed;top:0;left:0;z-index:" + d.z + ";opacity:" + d.o, e("body")[0]
            .appendChild(m), o(), window.onresize = o,

            window.onmousemove = function (n) {

                n = n || window.event, y.x = n.clientX, y.y = n.clientY

            },

            window.onmouseout = function () {

                y.x = null, y.y = null

            };

        for (var s = [], f = 0; d.n > f; f++) {

            var h = w() * a,
                g = w() * c,
                v = 2 * w() - 1,
                p = 2 * w() - 1;
            s.push({
                x: h,
                y: g,
                xa: v,
                ya: p,
                max: 6e3
            })

        }

        u = s.concat([y]),

            setTimeout(function () {
                i()
            }, 100)

    }();
</script>
</body>

